<template>
	<view class="baseForm">
		<view class="overhidden" style="min-height: 8vh">
			<u--form labelPosition="left" :model="formData" ref="uForm"  labelWidth="160rpx" errorType="toast">
				<!-- 仓库 -->
				<u-form-item label="仓库" prop="processCode" @click="selectWarehouse()">
					<u--input
						v-model="formData.warehouseName"
						disabled
						disabledColor="#ffffff"
						class="inputHeight"
						inputAlign="right"
						prefixIcon="arrow-down"
						:prefixIconStyle="{ 'font-size': '14px', 'margin-left': '2px', 'margin-right': '5px' }"
						placeholder="请选择仓库"
					></u--input>
				</u-form-item>
				<!-- <u-form-item label="存储区" prop="equipCode" borderBottom @click="selectStorageSection()">
					<u--input
						v-model="formData.storageSectionName"
						disabled
						:disabledColor="formData.warehouseName ? '#fff' : '#f5f7fa'"
						class="inputHeight"
						inputAlign="right"
						prefixIcon="arrow-down"
						:prefixIconStyle="{ 'font-size': '14px', 'margin-left': '2px', 'margin-right': '5px' }"
						placeholder="请选择存储区"
					></u--input>
				</u-form-item>
				<u-form-item label="料位" prop="projectCode" borderBottom @click="selectShelf()">
					<u--input
						v-model="formData.shelfName"
						disabled
						:disabledColor="formData.warehouseName && formData.storageSectionName ? '#ffffff' : '#f5f7fa'"
						class="inputHeight"
						inputAlign="right"
						prefixIcon="arrow-down"
						:prefixIconStyle="{
							'font-size': '14px',
							'margin-left': '2px',
							'margin-right': '5px'
						}"
						placeholder="请选择料位"
					></u--input>
				</u-form-item> -->
			</u--form>		
		</view>		
		<u-loading-icon class="flex justify-center mt-20" textSize="18" v-show="tableLoading"></u-loading-icon>
		<u-line style="margin: 5px 0;"></u-line>
		<view v-if="tableList.length" style="height: 75vh;overflow: auto;">
			<u-list ref="tableScroll" @scrolltolower="scrolltolower" class="list" :pagingEnabled="false" :scrollable="false" height="auto">
				<u-list-item v-for="(item, index) in tableList" :key="item.id" @click="jump(item)">
					<view class="card">
						<view class="flex flex-col justify-between flex-1 h-full record-content-body" style="padding-bottom: 0px">
							<view class="record-content">
								<view class="record-item">
									<text>仓库号:  {{ item.warehouseCode || '' }}</text>
									<text>仓库名:  {{ item.warehouseName || '' }}</text>
								</view>
							</view>
						</view>
						<view class="flex flex-col justify-between flex-1 h-full record-content-body" style="padding-bottom: 0px">
							<view class="record-content">
								<view class="record-item">
									<text>仓位号:  {{ item.binCode || '' }}</text>
									<text>仓位名:  {{ item.binName || '' }}</text>
								</view>
							</view>
						</view>
<!-- 						<view class="flex flex-col justify-between flex-1 h-full record-content-body" style="padding-bottom: 0px">
							<view class="record-content">
								<view class="record-item">
									<text>存储区号:  {{ item.storageSectionCode || '' }}</text>
									<text>存储区名:  {{ item.storageSectionName || '' }}</text>
								</view>
							</view>
						</view> -->
<!-- 						<view class="flex flex-col justify-between flex-1 h-full record-content-body" style="padding-bottom: 0px">
							<view class="record-content">
								<view class="record-item">
									<text>料架号:  {{ item.shelfCode || '' }}</text>
									<text>料架名:  {{ item.shelfName || '' }}</text>
								</view>
							</view>
						</view> -->
						
					</view>
				</u-list-item>
			</u-list>
		</view>
		

		<u-picker
			ref="uModal1"
			:show="showWarehouse"
			:columns="columnsWarehouse"
			title="请选择"
			keyName="warehouseCode"
			immediateChange
			cancel-text="取 消"
			@cancel="showWarehouse = false"
			@confirm="typeSelectWarehouse"
		></u-picker>
		<u-picker
			ref="uModal2"
			:show="showStorageSection"
			:columns="columnsStorageSection"
			title="请选择"
			keyName="storageSectionCode"
			immediateChange
			cancel-text="取 消"
			@cancel="showStorageSection = false"
			@confirm="typeSelectStorageSection"
		></u-picker>
		<u-picker
			ref="uModal3"
			:show="showShelf"
			:columns="columnsShelf"
			title="请选择"
			keyName="shelfCode"
			immediateChange
			cancel-text="取 消"
			@cancel="showShelf = false"
			@confirm="typeSelectShelf"
		></u-picker>
		<u-back-top :scroll-top="scrollTop" top="200" mode="squery"></u-back-top>
	</view>
</template>

<script lang="ts" setup>
import dayjs from 'dayjs';
import { ref, reactive, onMounted, toRaw } from 'vue';
import { onPageScroll, onLoad, onReachBottom, onShow } from '@dcloudio/uni-app';
import ScanBar from '@/components/scan-bar/index.vue';
import { http } from '@/utils/http';
import { CommonValue, PageResult } from '@/types/type';
import { useDictionaryStore } from '@/stores/useDictionaryStore';
//import { getMdmBininfosApi } from '@/api/common';
import { useWmsStore } from '@/stores/useWmsStore';

// 获取安全距离高度
const { safeAreaInsets } = uni.getSystemInfoSync();

// 监听页面到顶部距离
const scrollTop = ref(0);
onPageScroll((e) => {
	scrollTop.value = e.scrollTop;
});

// 待完成数据
const current = ref(0);
const tableList = ref([]);
const tableLoading = ref(false);
const totalPage = ref(0);
const total = ref(0);

const scrolltolower = () => {
	totalPage.value > current.value;
};
// 触底监听
onReachBottom(() => {
	scrolltolower();
});

onLoad(() => {
	getWarehouseList();
});

// 页面展示时刷新
onShow(() => {
	current.value = 0;
	tableList.value = [];
	//loadmore();
});

// 表单详情
let formData = reactive({
	warehouseId: '',
	warehouseCode: '',
	warehouseName: '',
	storageSectionId: '',
	storageSectionCode: '',
	storageSectionName: '',
	shelfId: '',
	shelfCode: '',
	shelfName: '',
	binId: '',
	binCode: '',
	binName: '',
	barcode: '',
});


// 网页跳转
async function jump(item) {
	await useWmsStore().setDeviceList(item);
	uni.navigateBack();
}

const getBinList = async () => {
	tableLoading.value = true;
	await http({
		url: `/wms/wmsbin/getListOption`,
		method: 'POST',
		data: {warehouseId:formData.warehouseId,
		asnType:6,
		materialCode:null}
	}).then((res) => {
		console.log('getBinList',res.data);
		tableList.value = res.data;
		tableLoading.value = false;
	});
};

const columnsWarehouse = ref([[]]);
const showWarehouse = ref(false);
const warehouseList = ref([]);
async function getWarehouseList (){
	await http({
		method: 'POST',
		url: `/wms/wmswarehouse/getOptionList`,
		data: {
			// "equipmentcode":umodel.equipCode,
			// "endpointCode": umodel.sapPoint,
			deleted: 0 
		}
	}).then((res) => {
		warehouseList.value = res.data;
		columnsWarehouse.value[0] = res.data;
	});
};
function selectWarehouse(){
	showWarehouse.value = true;	
}
function typeSelectWarehouse(e) {
	console.log(e);
	if (e.value.length) {
		formData.warehouseId = e.value[0].id;
		formData.warehouseName = e.value[0].warehouseName;
		formData.warehouseCode = e.value[0].warehouseCode;
	}
	showWarehouse.value = false;
	getBinList();
	//getStorageSectionList();
}


const columnsStorageSection= ref([[]]);
const showStorageSection = ref(false);
const storageSectionList = ref([]);
async function getStorageSectionList () {
	await http({
		url: `/wms/wmsstoragesection/getList/${formData.warehouseId}`,
		method: 'GET',
		data: {}
	}).then((res) => {
		storageSectionList.value = res.data;
		columnsStorageSection.value[0] = res.data;
	});
};
function selectStorageSection(){
	showStorageSection.value = true;	
}
function typeSelectStorageSection(e) {
	console.log(e);
	if (e.value.length) {
		formData.storageSectionId = e.value[0].id;
		formData.storageSectionName = e.value[0].storageSectionName;
		formData.storageSectionCode = e.value[0].storageSectionCode;
	}
	showStorageSection.value = false;
	getBinList();
	getShelfList();
}


const columnsShelf= ref([[]]);
const showShelf = ref(false);
const shelfList = ref([]);
async function getShelfList () {
	await http({
		url: `/wms/wmsshelf/getList/${formData.storageSectionId}`,
		method: 'GET',
		data: {}
	}).then((res) => {
		shelfList.value = res.data;
		columnsShelf.value[0] = res.data;
	});
};
function selectShelf(){
	showShelf.value = true;	
}
function typeSelectShelf(e) {
	console.log(e);
	if (e.value.length) {
		formData.shelfId = e.value[0].id;
		formData.shelfName = e.value[0].shelfName;
		formData.shelfCode = e.value[0].shelfCode;
	}
	showShelf.value = false;
	getBinList();
}
</script>

<style lang="scss" scoped>
.card {
	background-color: #fff;
	margin: 5px 10px;
	border-radius: 8px;
	padding: 8px 12px;
	transition: all 300ms ease;
	box-shadow: 0 2px 6px rgba(3, 121, 255, 0.05);
}

.overhidden {
	overflow: hidden;
}
uni-page-body {
	min-height: 100vh;
	height: 100%;
	background-color: #fbfbff;
}

.u-divider {
	margin: 10px 0;
}

.baseForm {
	background-color: #fbfbff;
	display: block;
	min-height: 94vh;
	padding: $uni-page-padding;
	.u-form {
		margin-top: 5px;
		:deep(.u-form-item__body) {
			padding: 5px 0;
		}
		.u-input {
			border: 1px solid $uni-input-border-color;
		}
		.scan-bar {
			display: flex;
			flex: 1;
		}
	}
}

.title {
	font-size: 16px;
	margin: 6px 0 14px;
	font-weight: bold;
	.u-icon {
		margin-right: 3px;
	}
}

.title1 {
	font-size: 15px;
	margin: 6px 16px 2px;
	font-weight: bold;
	color: #16254e;
	display: flex;
	justify-content: space-between;
}

.submit_btn {
	height: 42px;
	border-radius: 10px;
	margin: 10px 0px;
	width: 80px;
	font-size: 18px;
	:deep(.u-button__text) {
		font-size: 16px !important;
		font-weight: bold;
	}
	// .custom-style {
	// 	// width: 120px;
	// 	margin: 10px 5px 5px;
	// 	height: 36px;
	// 	border-radius: 8px;
	// 	&:nth-child(1) {
	// 		flex: 1;
	// 	}
	// 	&:nth-child(2) {
	// 		flex: 3;
	// 	}
	// }
}
.grey_btn {
	margin: 0px 10rpx 20rpx 20rpx;
	height: 45px;
	line-height: 45px;
}
.submit_btn_div {
	position: fixed;
	display: flex;
	align-items: center;
	width: 100%;
	bottom: 0;
	z-index: 10;
	uni-button {
		flex: 1;
		border-radius: 10px;
	}
}

:deep(.u-form-item__body) {
	padding: 4px 0 12px;
}

.mt-10- {
	margin-top: -30px;
}

.record-title {
	display: flex;
	justify-content: space-between;
	margin: 4px 0 3px 0;
	color: $primary-color;
	uni-text:nth-child(1) {
		font-weight: bold;
		font-size: 15px;
	}
	uni-text:nth-child(2) {
		font-weight: bold;
		font-size: 15px;
		min-width: 60px;
		text-align: right;
	}
}
.record-item {
	margin: 3px 0 !important;
	color: #777 !important;
	display: flex;
	font-size: 14px;
	// justify-content: flex-start !important;
	flex: 1;
}
.searchScan1 {
	display: flex;
	height: 34px;
	padding: 4px 12px 0px;
	:deep(.u-search__content) {
		border: none;
		background-color: #fff !important;
		box-shadow: 0 1px 8px 0px rgb(19 10 236 / 8%);
	}
	.searchScan {
		flex: auto;
	}
	.addBtn1 {
		width: 60px;
		height: 34px;
		margin-left: 8px !important;
		border-radius: 6px;
		:deep(.u-button__text) {
			font-size: 14px !important;
		}
	}
}
:deep(.uni-input-placeholder) {
	color: #8f8e94 !important;
}
</style>
